Add Charts to Our JavaScript App with Anychart — Scatter Line Charts, Scatter Marker Charts, and Sankey Diagrams

Anychart is an easy to use library that lets us add chart into our JavaScript web app.

In this article, we’ll look at how to create basic charts with Anychart.

Scatter Line Chart

We can add a scatter line chart with Anychart.

For instance, we can add the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

Then we can add the following JavaScript code:

const data = [{
    x: 1.3,
    value: 39,
  },
  {
    x: 2.5,
    value: 42,
  },
  {
    x: 3.2,
    value: 54,
  },
  {
    x: 3.9,
    value: 38,
  },
  {
    x: 5.1,
    value: 58,
  }
];

const chart = anychart.scatter();
const series = chart.line(data);
chart.container("container");
chart.draw();

We add the script tag to add the Anychart base package.

The div is the container to render the chart in.

Then we add the data array to add the data into our chart.

Each entry has the x property with the x-axis value.

The value property has the y-axis value.

Then we call anychart.scatter to create the scatter chart.

chart.line lets us add a line to the scatter chart.

We also set the data to render with the method.

chart.container sets the ID of the container to render the chart in.

chart.draw draws the chart.

Scatter Marker Chart

We can create a scatter marker chart with the following code:

const data = [{
    x: 1.3,
    value: 39,
  },
  {
    x: 2.5,
    value: 42,
  },
  {
    x: 3.2,
    value: 54,
  },
  {
    x: 3.9,
    value: 38,
  },
  {
    x: 5.1,
    value: 58,
  }
];

const chart = anychart.scatter();
const series = chart.marker(data);
chart.container("container");
chart.draw();

We have the data array as in the previous example.

And we call anychart.scatter again to create a scatter chart.

chart.marker lets us add the markers to the chart.

We set the data to render with this method.

The rest of the code is the same as the previous example.

Sankey Diagram

We can add a Sankey diagram with Anychart.

To add the chart, we write the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sankey.min.js"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

Then we add the following JavaScript code:

const data = [{
    from: "Canada",
    to: "France",
    weight: 434
  },
  {
    from: "Canada",
    to: "Germany",
    weight: 343
  },
  {
    from: "Canada",
    to: "Italy",
    weight: 434
  },
  {
    from: "Canada",
    to: "Spain",
    weight: 213
  },
  {
    from: "USA",
    to: "France",
    weight: 341
  },
  {
    from: "USA",
    to: "Germany",
    weight: 343
  },
  {
    from: "USA",
    to: "Spain",
    weight: 232
  }
];

const chart = anychart.sankey(data);
chart.nodeWidth("30%");
chart.container("container");
chart.draw();

We add the Anychart base package and the Sankey package with the script tags.

The div is the same as the previous examples.

Then we add the data array with the from , to and weight properties in each entry.

from and to to has the values which line goes from and to respectively.

weight is the weight of the line.

Next, we call anychart.sankey to create the sankey chart.

chart.nodeWidth has the width of the nodes.

And the rest of the code is the same as the previous examples.

Conclusion

We can add scatter line charts, scatter marker charts, and Sankey diagrams easily with Anychart.